<template>
    <el-card class="box-card Content">
        <div>
            <h1>Swagger For Self</h1>
            <p class="subTitle">Swagger 项目接口导出工具</p>
            <el-dropdown trigger="click" class="_block" placement="bottom" @command="handleCommand">
                <el-input placeholder="请输入内容" v-model="value" clearable></el-input>
                <el-dropdown-menu slot="dropdown" class="search-options" v-if="options.length">
                    <el-dropdown-item class="dropdown-item" v-for="(item,index) in options" :command="index" :key="'options_' + index">
                        <span>{{item}}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <br />
            <el-button type="primary" :loading="loading" class="_block" @click="SaveUrl">链接</el-button>
        </div>
    </el-card>
</template>

<script>

var time = null;

import storage from './storage.js'

export default {
    name: 'App',
    data() {
        return {
            loading: false,
            value: '',
            options: [],
        }
    },
    mounted() {
        var pathList = storage.get('pathList');
        if (!pathList) {
            storage.set('pathList', []);
        } else {
            this.options = pathList;
        };
    },
    methods: {
        handleCommand(index) {
            this.value = this.options[index];
        },
        SaveUrl() {
            this.loading = true;
            this.$bus.getDoc(this.value).then((res) => {
                this.$bus.$emit('hide-card');
                this.options.push(this.value);
                var _Set = new Set();
                this.options.forEach(element => {
                    _Set.add(element);
                });
                storage.set('pathList', [..._Set]);
            });
        },
    }
}
</script>

<style scoped>
.Content {
    width: 40%;
    margin: 150px auto 0 auto;
}

._block {
    width: 100%;
    display: block;
}

.subTitle {
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
}
.search-options {
    width: 40%;
    max-height: 400px;
    overflow: auto;
    padding: 10px 20px;
}
.search-options::-webkit-scrollbar {
    width: 6px;
}

.search-options::-webkit-scrollbar-thumb {
    background-color: rgba(94, 109, 130, 0.2);
    width: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.search-options::-webkit-scrollbar-thumb:hover {
    background-color: rgba(94, 109, 130, 0.5);
}

.dropdown-item {
    margin: 0 -20px;
    padding: 0 20px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
